<template>
  <div class="publish-page">
    <el-card>
      <div slot="header">
       <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 表单 -->
     <el-form label-width="120px">
        <el-form-item label="标题：">
          <el-input style="width:400px" v-model="articleForm.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="频道：">
           <el-form-item label="频道：">
          <my-channel v-model="articleForm.channel_id"></my-channel>
        </el-form-item>
        </el-form-item>
        <el-form-item label="封面：">
          <el-radio-group v-model="articleForm.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
          <div>
            上传组件
          </div>
        </el-form-item>
        <el-form-item label="内容：">富文本编辑器</el-form-item>
        <el-form-item label="">
          <el-button type="primary">发布文章</el-button>
          <el-button>存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'PublishPage',
  data(){
     return {
      articleForm: {
        // 标题
        title: null,
        // 频道ID
        channel_id: null,
        // 封面
        cover: {
          // 类型 1 单图 3 三图  0 无图  -1 自动 , 默认显示单图
          type: 1,
          // 图片数组
          images: []
        },
        // 内容
        content: null
      }
    }
  }
}
</script>
<style scoped lang="less">
::v-deep .el-select {
  width: 400px;
}
</style>
